<!--
  普通用户登录页面
  注意：此页面已迁移到新的分离式登录系统
  新的登录入口：/auth (选择页面) -> /auth/login (用户登录)
-->
<template>
  <div class="login-container">
    <div class="login-form-wrapper">
      <div class="login-header">
        <div class="logo">方舟鞋城</div>
        <h2>用户登录</h2>
        <p class="subtitle">请输入您的账号信息</p>
      </div>

      <LoginForm @success="onLoginSuccess" />

      <div class="form-options">
        <router-link to="/auth/admin-login" class="admin-login-link">管理员登录</router-link>
      </div>

      <div class="register-link">
        还没有账号？
        <router-link to="/auth/register">立即注册</router-link>
      </div>

      <div class="back-to-home">
        <el-button type="text" @click="goToHome">
          <el-icon><ArrowLeft /></el-icon>
          返回首页
        </el-button>
      </div>
    </div>

    <div class="login-image" v-if="!isMobile">
      <div class="login-bg"></div>
    </div>

    <!-- 错误提示 -->
    <el-dialog v-model="errorDialogVisible" title="登录失败" width="400px" center>
      <p>{{ authStore.error }}</p>
      <template #footer>
        <el-button type="primary" @click="errorDialogVisible = false">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watchEffect } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ArrowLeft } from '@element-plus/icons-vue'
import { useAuthStore } from '@/stores/auth'
import LoginForm from '@/components/auth/LoginForm.vue'

const router = useRouter()
const route = useRoute()
const authStore = useAuthStore()

const errorDialogVisible = ref(false)
const isMobile = computed(() => window.innerWidth <= 768)

const onLoginSuccess = () => {
  ElMessage.success('登录成功！')
  const redirect = (route.query.redirect as string) || '/'
  router.push(redirect)
}

const goToHome = () => {
  router.push('/')
}

// 监听错误状态
watchEffect(() => {
  if (authStore.error) {
    errorDialogVisible.value = true
  }
})

onMounted(() => {
  // 如果已登录，跳转到首页
  if (authStore.isLoggedIn) {
    router.push('/')
  }
})
</script>

<style scoped lang="scss">
.login-container {
  display: flex;
  min-height: 100vh;
  background: linear-gradient(135deg, #ff5a00 0%, #ff0036 100%);

  .login-form-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    background: white;
    max-width: 500px;

    .login-header {
      text-align: center;
      margin-bottom: 2rem;

      .logo {
        color: #ff5a00;
        font-weight: bold;
        font-size: 1.5rem;
        margin-bottom: 1rem;
      }

      h2 {
        color: #2c3e50;
        margin: 0 0 0.5rem 0;
        font-size: 1.8rem;
      }

      .subtitle {
        color: #7f8c8d;
        margin: 0;
        font-size: 1rem;
      }
    }

    .form-options {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-bottom: 1rem;
      width: 100%;
      max-width: 400px;

      .admin-login-link {
        color: #ff5a00;
        text-decoration: none;
        font-size: 0.9rem;

        &:hover {
          text-decoration: underline;
        }
      }
    }

    .register-link {
      text-align: center;
      margin-top: 2rem;
      color: #7f8c8d;
      font-size: 0.95rem;

      a {
        color: #ff5a00;
        text-decoration: none;
        font-weight: 600;

        &:hover {
          text-decoration: underline;
          color: #ff0036;
        }
      }
    }

    .back-to-home {
      margin-top: 2rem;
      text-align: center;

      .el-button {
        color: #7f8c8d;

        &:hover {
          color: #ff5a00;
        }
      }
    }
  }

  .login-image {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    .login-bg {
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #ff5a00 0%, #ff0036 100%);
      position: relative;

      &::before {
        content: '🔐';
        font-size: 8rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0.1;
      }
    }
  }
}

@media (max-width: 768px) {
  .login-container {
    flex-direction: column;

    .login-form-wrapper {
      max-width: 100%;
      padding: 1rem;
    }

    .login-image {
      display: none;
    }
  }
}
</style>
